<script setup lang="ts">
import {getHomeCarouselByLevel} from "@/api/home/home";
import {ECode, PagePath} from "@/util/commonUtil";
import {onBeforeMount, ref} from "vue";

const secondData = ref<any>([])
const emit = defineEmits(['isSecondRecommendShow']);

onBeforeMount(() => {
  getDataList()
})

function getDataList() {
  let secondParams = new URLSearchParams()
  secondParams.append('level', String(2))
  // 是否排序
  secondParams.append('useSort', String(1))
  getHomeCarouselByLevel(secondParams).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      secondData.value = response.data.records;
      // 当没有数据时，进行触发回调函数
      if (secondData.value.length > 0) {
        emit("isSecondRecommendShow", true);
      } else {
        emit("isSecondRecommendShow", false);
      }
    }
  })
}
</script>

<template>
  <section class="home-topic relative float-right w-full h-full">
    <ul class="topic-ul flex flex-col gap-2 h-full overflow-hidden">
      <template v-for="item in secondData">
        <li class="relative overflow-hidden w-full text-white hover:text-black">
          <a :href="PagePath.PostInfoPath + item.uid">
            <img class="h-full w-full rounded-xl"
                 v-if="item.photoList"
                 v-lazy="item.photoList[0]"
                 :src="item.photoList[0]" :alt="item.title"/>
            <h2 class="cursor-pointer absolute w-full text-center z-10 bottom-2 h-auto">
              <span class="flex justify-center items-center">{{ item.title }}</span>
            </h2>
            <span class="absolute z-10 block top-5 left-5">
              <a-tag color="purple">{{item.blogSort.sortName}}</a-tag>
            </span>
            <div class="mask absolute top-0 bottom-0 left-0 right-0 rounded-xl hover:opacity-35"></div>
          </a>
        </li>
      </template>
    </ul>
  </section>
</template>

<style scoped lang="less">

</style>
